<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" th:href="@{/assets/images/Shop.ico}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
</head>

<body>
<div th:include="head :: headname"></div>

<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a th:href="@{/goods/index}"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active">我的购物车</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->

<!-- Shopping Cart Section Start -->
<div class="section section-margin">
    <div class="container">

        <div class="row">
            <div class="col-12">

                <!-- Cart Table Start -->
                <div class="cart-table table-responsive">
                    <table class="table table-bordered">

                        <!-- Table Head Start -->
                        <thead>
                        <tr>
                            <th style="width: 23px">
                                <input id="check-all" type="checkbox" style="display: inline-block">
                            </th>
                            <th class="pro-thumbnail">图片</th>
                            <th class="pro-title">商品</th>
                            <th class="pro-price">价格</th>
                            <th class="pro-quantity">数量</th>
                            <th class="pro-subtotal">总计</th>
                            <th class="pro-remove">移除</th>
                        </tr>
                        </thead>
                        <!-- Table Head End -->

                        <!-- Table Body Start -->
                        <tbody class="product_show" th:fragment="product_show">
                        <tr th:each="v:${cartItems}">
                            <td><input class="check-one" type="checkbox"
                                       style="display: inline-block" th:value="${v.productId}"></td>
                            <td class="pro-thumbnail">
                                <a href="#">
                                    <img class="fit-image" th:src="${v.productPic}" alt="Product"/>
                                </a>
                            </td>
                            <td class="pro-title">
                                <a href="#" th:text="${v.productName}"></a>
                            </td>
                            <td class="pro-price">
                                <span th:text="${v.price}"></span>
                            </td>
                            <td class="pro-quantity">
                                <div class="quantity">
                                    <div class="cart-plus-minus">
                                        <input class="cart-plus-minus-box" th:value="${v.quantity}" type="text"
                                               readonly>
                                        <div class="dec qtybutton" th:attr="data-id=${v.id}">-</div>
                                        <div class="inc qtybutton" th:attr="data-id=${v.id}">+</div>
                                    </div>
                                </div>
                            </td>
                            <td class="pro-subtotal">
                                <span th:text="${v.price*v.quantity}"></span>
                            </td>
                            <td class="pro-remove">
                                <a href="javascript:void(0)" onclick="del(this)" th:attr="data-id=${v.id}"><i
                                        class="pe-7s-close"></i></a>
                            </td>
                        </tr>
                        </tbody>
                        <!-- Table Body End -->

                    </table>
                </div>
                <!-- Cart Table End -->

                <!-- Cart Button Start -->
                <div class="cart-button-section">
                    <a href="#" class="btn btn-primary btn-hover-dark">继续购物</a>
                    <a th:href="@{/order/cart/clear}" class="btn btn-primary btn-hover-dark">清空购物车</a>
                </div>
                <!-- Cart Button End -->

            </div>
        </div>

        <div class="row mt-10 mb-n10">
            <div class="col-lg-6 mb-10">
                <div class="delivery-date-wrapper mb-6">
                    <h3 class="title">预计发货日期</h3>
                    <form action="#" class="date-input-label">
                        <label class="date-label" for="cart-date-out"></label>
                        <span class="date-in">
                                    <input class="date-input" id="cart-date-out" type="text" name="date" readonly>
                                </span>
                    </form>
                    <hr/>
                    <h3 class="title">特别说明</h3>
                    <span>我们不在周末交货。</span>
                </div>
            </div>
            <div class="col-lg-6 mb-10">

                <!-- Cart Calculation Area Start -->
                <div class="cart-calculator-wrapper">

                    <!-- Cart Calculate Items Start -->
                    <div class="cart-calculate-items">

                        <!-- Cart Calculate Items Title Start -->
                        <h3 class="title">购物车总计</h3>
                        <!-- Cart Calculate Items Title End -->

                        <!-- Responsive Table Start -->
                        <div class="table-responsive">
                            <table class="table">
                                <tr>
                                    <td>小计</td>
                                    <td id="sub-total">$230</td>
                                </tr>
                                <tr>
                                    <td>运费</td>
                                    <td id="shipping">$70</td>
                                </tr>
                                <tr class="total">
                                    <td>总计</td>
                                    <td class="total-amount" id="total">$300</td>
                                </tr>
                            </table>
                        </div>
                        <!-- Responsive Table End -->

                    </div>
                    <!-- Cart Calculate Items End -->

                    <!-- Cart Checktout Button Start -->
                    <a href="javascript:void(0)" onclick="checkout()" class="btn btn-primary btn-hover-dark mt-6"
                       style="float: right">去结算</a>
                    <!-- Cart Checktout Button End -->

                </div>
                <!-- Cart Calculation Area End -->

            </div>
        </div>

    </div>
</div>
<!-- Shopping Cart Section End -->

<!-- Footer Section Start -->
<div th:replace="footer :: footerS"></div>
<!-- Footer Section End -->


<!-- Mobile Menu Start -->
<div class="mobile-menu-wrapper">
    <div class="offcanvas-overlay"></div>

    <!-- Mobile Menu Inner Start -->
    <div class="mobile-menu-inner">

        <!-- Button Close Start -->
        <div class="offcanvas-btn-close">
            <i class="pe-7s-close"></i>
        </div>
        <!-- Button Close End -->

        <!-- Mobile Menu Inner Wrapper Start -->
        <div class="mobile-menu-inner-wrapper">
            <!-- Mobile Menu Search Box Start -->
            <div class="search-box-offcanvas">
                <form>
                    <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                    <button class="search-btn"><i class="pe-7s-search"></i></button>
                </form>
            </div>
            <!-- Mobile Menu Search Box End -->

            <!-- Mobile Menu Start -->
            <div class="mobile-navigation">
                <nav>
                    <ul class="mobile-menu">
                        <li class="has-children">
                            <a href="#">Home <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="index.html">Home One</a></li>
                                <li><a href="index-2.html">Home Two</a></li>
                                <li><a href="index-3.html">Home Three</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="shop.html">Shop Grid</a></li>
                                <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                <li><a href="wishlist.html">Wishlist</a></li>
                                <li><a href="cart.html">Shopping Cart</a></li>
                                <li><a href="checkout.html">Checkout</a></li>
                                <li><a href="compare.html">Compare</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="single-product.html">Single Product</a></li>
                                <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                <li><a href="single-product-group.html">Single Product Group</a></li>
                                <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                <li><a href="faq.html">Faq</a></li>
                                <li><a href="error-404.html">Error 404</a></li>
                                <li><a href="my-account.html">My Account</a></li>
                                <li><a href="login.html">Loging | Register</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                <li><a href="blog-details.html">Blog Details</a></li>
                                <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Mobile Menu End -->

            <!-- Language, Currency & Link Start -->
            <div class="offcanvas-lag-curr mb-6">
                <div class="header-top-lan-curr-link">
                    <div class="header-top-lan dropdown">
                        <h4 class="title">Language:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i
                                class="fa fa-angle-down"></i></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">English</a></li>
                            <li><a class="dropdown-item" href="#">Japanese</a></li>
                            <li><a class="dropdown-item" href="#">Arabic</a></li>
                            <li><a class="dropdown-item" href="#">Romanian</a></li>
                        </ul>
                    </div>
                    <div class="header-top-curr dropdown">
                        <h4 class="title">Currency:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">USD</a></li>
                            <li><a class="dropdown-item" href="#">Pound</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Language, Currency & Link End -->

            <!-- Contact Links/Social Links Start -->
            <div class="mt-auto bottom-0">

                <!-- Contact Links Start -->
                <ul class="contact-links">
                    <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                    <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                    <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span></li>
                </ul>
                <!-- Contact Links End -->

                <!-- Social Widget Start -->
                <div class="widget-social">
                    <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                    <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                    <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                    <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                    <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                </div>
                <!-- Social Widget Ende -->
            </div>
            <!-- Contact Links/Social Links End -->
        </div>
        <!-- Mobile Menu Inner Wrapper End -->

    </div>
    <!-- Mobile Menu Inner End -->
</div>
<!-- Mobile Menu End -->

<!-- Scripts -->
<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{assets/js/main.js}"></script>
<script th:src="@{/assets/js/jquery.js}"></script>
<script>
    $(function () {
        select()
        getNextDate(1)
        getTotal()
    })

    function getNextDate(day) {
        var dd = new Date();
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        $('#cart-date-out').val(y + "-" + m + "-" + d)
        $('#dataToCart').append(`<span class="header-action-num" id="header-cart-num"></span>`)
    }

    function del(that) {
        let id = $(that).attr('data-id')
        $.ajax({
            type: 'post',
            url: '/order/cart/del',
            data: {
                "id": id
            },
            success: function () {
                $(that.parentNode.parentNode).remove();
                getTotal()
            }
        })
    }

    function getTotal() {
        $.ajax({
            type: 'get',
            url: '/order/carts',
            data: {
                "id": ""
            },
            success: function (result) {
                let count = 0
                let subTotal = 0
                for (let i = 0; i < result.length; i++) {
                    count += result[i].quantity
                    subTotal += result[i].price * result[i].quantity
                }
                $('#shipping').text('￥' + count * 2)
                $('#sub-total').text('￥' + subTotal)
                $('#total').text('￥' + (subTotal + count * 2))
                $('#header-cart-num').text(count)
            }
        })
    }

    function checkout() {
        let ids = []
        $('.check-one:checked').each(function (i) {	//遍历
            ids.push($(this).val());
        })
        let a1 = $("<a>")
        a1[0].href = "/order/checkout/" + ids
        a1[0].click();
    }

    $('#check-all').click(function () {
        $('.check-one').prop('checked', this.checked);
    })

    function select() {
        let total = $('.check-one').length
        $('.check-one').change(function () {
            let count = $('.check-one:checked').length
            if (count == total) {
                $('#check-all').prop('checked', true)
            } else {
                $('#check-all').prop('checked', false)
            }
        })
    }


</script>
</body>

</html>